<template>
  <div class="category">
    <div class="left">
      <p>添加分类</p>
      <el-input v-model="label" placeholder="请输入分类名称"></el-input>
      <el-input
        v-model="value"
        placeholder="输入分类值 (请输入英文,作为路由使用)"
      ></el-input>
      <el-button type="primary" plain @click="preserve">{{
        flag === true ? "更新" : "保存"
      }}</el-button>
      <div class="btn" v-if="flag === true">
        <el-button type="primary" plain @click="embedding">返回添加</el-button>
        <el-button type="primary" plain @click="del()">删除</el-button>
      </div>
    </div>
    <div class="right">
      <p>所有分类</p>
      <span
        @click="present(item)"
        v-for="(item, index) in classifyList"
        :key="index"
        >{{ item.label }}</span
      >
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { mapState, mapActions } from "vuex";
import { getClassifyDel, getUpdate } from "@/api/artilce/all.js";
export default {
  data() {
    return {
      label: "",
      value: "",
      flag: false,
      id: "",
    };
  },

  computed: {
    ...mapState({
      classifyList: (state) => state.all.classifyList,
      artilceAllList: (state) => state.all.artilceAllList,
    }),
  },

  methods: {
    ...mapActions({
      getClassify: "all/getClassify",
      getKind: "all/getKind",
    }),

    //添加
    async preserve() {
      if (!this.flag) {
        let i = this.classifyList.findIndex((item, index) => {
          if (item.label == this.label && item.value == this.value) {
            return index;
          }
        });
        console.log(i);
        if (i !== -1) {
          Message.error("已存在,请重新选择添加");
          this.label = "";
          this.value = "";
        } else if (this.label == "" || this.value == "") {
          Message.error("不能为空,请重新选择添加");
        } else {
          if (this.label && this.value) {
            await this.getKind({ label: this.label, value: this.value });
            //清空输入框
            this.label = "";
            this.value = "";
            Message.success("添加成功");
            this.getClassify();
          }
        }
      } else {
        //更新
        const result = await getUpdate({id:this.id,label: this.label, value: this.value });
        console.log(result);
        if (result.statusCode === 200) {
          Message.success("更新成功");
          this.getClassify();
          this.flag = false;
          this.label = "";
          this.value = "";
        } else {
          Message.error("更新失败");
        }
      }
    },

    //present
    present(item) {
      // console.log(item);
      this.label = item.label;
      this.value = item.value;
      this.flag = true;
      this.id = item.id;
    },

    //返回添加
    embedding() {
      this.label = "";
      this.value = "";
      this.flag = false;
    },

    //删除分裂管理接口
    async del() {
      const result = await getClassifyDel(this.id);
      if (result.statusCode === 200) {
        Message.success("删除成功");
        this.getClassify();
        this.flag = false;
        this.label = "";
        this.value = "";
      } else {
        Message.error("删除失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.category {
  background: #eee;
  width: 100%;
  display: flex;
  .left {
    width: 400px;
    height: 400px;
    background: #fff;
    margin: 20px 35px;
  }
}
.right {
  width: 700px;
  background: #fff;
  margin: 20px 35px;
  height: 200px;
  span {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 7px;
    margin: 15px;
  }
}
p {
  height: 35px;
  line-height: 35px;
  font-weight: 900;
  border-bottom: 1px solid #ccc;
  padding-left: 25px;
}
.el-input--medium {
  margin-bottom: 20px;
  padding-left: 25px;
}
button {
  margin-left: 25px;
}
</style>
>
